<!--
 * @Descripttion: js
 * @Version: 1.0
 * @Author: name
 * @Date: 2021-03-03 20:03:20
 * @LastEditors: name
 * @LastEditTime: 2021-03-03 23:06:25
-->
<template>
  <div class="product-item"
       @click="toDetail">
    <img :src="ossUrl+value.img_z_thumb"
         alt="">
    <div class="product-info">
      <p class="limit-2"
         style="margin-bottom:3px">{{value.goods_name + value.goods_intro }}</p>
      <span class="price m-primary">￥{{value.price}}.00</span>
      <span class="pay-num m-info">12人已付款</span>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, ref } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "GoodsItem",
  props: ["value"],
  created () { },
  setup (prop, self) {
    const { ctx } = getCurrentInstance();
    const ossUrl = "https://pms-uploads1.oss-cn-chengdu.aliyuncs.com";
    const { push } = useRouter();
    const { toDetail } = initTools(push, prop.value);
    return { ossUrl, toDetail };
  },
};
const initTools = (push, value) => {
  const toDetail = () => {
    push({ path: "/detail", query: { goods_id: value.goods_id } });
  };
  return { toDetail };
};
</script>

<style scoped lang="less">
.product-item {
  width: calc(50% - 5px);
  flex-shrink: 0;
  min-height: 215px;
  margin: 5px 0;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  img {
    position: relative;
    width: 80%;
    left: 10%;
    top: 10%;
  }
  .product-info {
    padding: 10px 15px;
    font-size: 0.8rem;
    .price {
      font-size: 1rem;
      margin-right: 3px;
    }
    .pay-num {
      font-size: 0.5rem;
    }
  }
}
</style>
